<template>
    <view class="goods-detail" :style="$theme.pageStyle">
        <!-- 导航栏 -->
        <navbar
            :title="goods.name || '商品详情'"
            :background="{ background: `rgba(256,256,256,${goods.percent || 0})` }"
            :titleColor="`rgba(0,0,0,${goods.percent || 0})`"
            :immersive="true"
        ></navbar>

        <!-- 轮播图 -->
        <goods-swiper		
            :images="goods.goodsImage || []"
            :video="goods.video || ''"
            :video-cover="goods.videoCover || ''"
        />

        <!-- 商品内容 -->
        <view class="rounded-[14rpx] overflow-hidden bg-white m-[20rpx]">
            <!-- 限时秒杀 -->
            <activity-view :activity="activity" v-if="GoodsTypeEnum.SECKILL == goodsPayload.type">
                <template #price>
                    <price
                        :content="activity.minSeckillPrice"
                        main-size="46rpx"
                        minor-size="28rpx"
                        prefix="秒杀价￥"
                        color="#FFFFFF"
                    />
                </template>
            </activity-view>

            <view class="p-[20rpx]">
                <!-- 价格 -->
                <view class="pb-[16rpx] flex justify-between items-center">
                    <view>
                        <price
                            :content="goods.sellPrice"
                            main-size="46rpx"
                            minor-size="28rpx"
                            :suffix="goods.specType == 2 ? '' : ''"
                        />
                        <price
                            class="pl-[12rpx]"
                            mainSize="28rpx"
                            :line-through="true"
                            :content="goods.checkedSku?.linePrice || 0"
                            color="#999"
                            :suffix="goods.specType == 2 ? '' : ''"
                            v-show="goods.checkedSku?.linePrice && Number(goods.checkedSku.linePrice) > 0"
                        />
                    </view>

                    <view class="text-center ml-[30rpx]" @click="showShare = true">
                        <image
                            src="@/static/images/goods/icon_share.png"
                            class="w-[36rpx] h-[36rpx]"
                        />
                    </view>
                </view>

                <!-- 商品领券 -->
                <coupon-com
                    :goods-id="goods.id"
                    v-if="goodsPayload.type === GoodsTypeEnum.ORDINARY"
                ></coupon-com>

                <!-- 商品名称与分享 -->
                <view class="flex items-start justify-between">
                    <view class="flex-1 text-lg font-medium">{{ goods.name }}</view>
                    <!-- <view class="text-center ml-[30rpx]" @click="showShare = true">
            <image
              src="@/static/images/goods/icon_share.png"
              class="w-[36rpx] h-[36rpx]"
            />
            <view class="text-sm text-[#707070]">分享</view>
          </view> -->
                </view>

                <!-- 商品简介 -->
                <!-- <view
                    v-if="goods.description"
                    class="pt-[18rpx] pb-[30rpx] text-sm text-[#666]"
                >
                    {{ goods.description }}
                </view> -->

                <!-- 商品销售数据 -->
                <view
                    class="flex justify-between text-xs text-[#999] py-[10px]"
                    v-if="goods?.decorate && goods.decorate[1] && goods.decorate[1]?.content?.show_conmment"
                >
                    <text v-if="goods.decorate[1]?.content?.show_sku_stock == 1">
                       库存： {{ goods.totalStock || 0 }}
                    </text>
                    <text v-if="goods.decorate[1]?.content?.show_goods_sales">
                        销量： {{ activity.salesVolume || goods.salesNum || 0 }}
                    </text>
                    <text v-if="goods.decorate[1]?.content?.show_goods_visit">
                        浏览量： {{ activity.browseVolume || goods.clickNum || 0 }}
                    </text>
                </view>
            </view>
        </view>
        <!-- 佣金 -->
        <Earning
            v-model="showShare"
            :content="goods.earningsData"
            v-if="goodsPayload.type == GoodsTypeEnum.ORDINARY"
        ></Earning>
        <!-- 配送规格信息 -->
        <view class="rounded-[14rpx] overflow-hidden bg-white m-[20rpx] pb-[18rpx]">
            <!-- 规格 -->
            <view
                class="flex justify-between text-base px-[30rpx] py-[26rpx]"
                @click="handleSpecClick"
            >
                <view class="flex-1 flex">
                    <text class="text-muted pr-4">选择</text>
                    <view class="flex-1 truncate pr-4 text-black">
                        <text>{{ goods.checkedSku?.skuValueArr || '默认规格' }}</text>
                        <text class="ml-3" v-if="goods.checkedSku?.number">{{ goods.checkedSku.number }}件</text>
                    </view>
                </view>
                <u-icon name="arrow-right" color="#707070"></u-icon>
            </view>
			<!-- 保障 -->
			<view		
				v-if="webType==2"
			    class="flex justify-between text-base px-[30rpx] py-[26rpx]"
			    @click="openSafe"
			>
			    <view class="flex-1 flex">
			        <text class="text-muted pr-4">保障</text>
			        <view class="flex-1 truncate text-black">
			            <text class="mr-3">明码标价•服务保证•极速退款•售后无忧</text>			            
			        </view>
			    </view>
			    <u-icon name="arrow-right" color="#707070"></u-icon>
			</view>
			
            <!-- 配送区域 -->
			<view v-if="webType==1">
				<RegionalDistribution
				    :defaultFreight="goods.defaultFreight"
				    :defaultAddress="goods.defaultAddress"
				    @refresh="getDetail"
				></RegionalDistribution>
			</view>            
        </view>

        <!-- 装修DIY -->

        <!-- 商品评论 -->
        <template v-if="goods.decorate && goods.decorate[3] && goods.decorate[3]?.content?.show_evaluate == 1">
            <reviews :comment="goods.goodsComment || []" :goodsId="goods.id" />
        </template>
        <!-- 猜你喜欢 -->
        <template v-if="goods.decorate && goods.decorate[4] && goods.decorate[4]?.content?.enabled == 1">
            <goods-recommend :content="goods.goods_like || []" />
        </template>

        <!-- 商品详情 -->
        <view class="break-all rich__text px-[24rpx]">
            <view class="goods-detail">
                <view class="goods-detail-content">商品详情</view>
            </view>
            <u-parse class="rich__text no-preview" :html="goods.content || ''"></u-parse>
        </view>

        <!-- 规格 -->
        <GoodsSpec
            ref="goodsSpecRef"
            :defaultInfo="{
                image: goods.goodsImage && goods.goodsImage[0] ? goods.goodsImage[0] : '',
                price: goods.sellPrice || 0,
                stock: goods.totalStock || 0,
                unit: goods.unit_name || ''
            }"
            :buttons="goods.buttons"
            :spec-list="goods.specValue || []"
            :spec-map="Array.isArray(goods.specValueList) ? goods.specValueList : (goods.specValueList ? Object.values(goods.specValueList) : [])"
            :activity-spec="activity.goodsSku || []"
            priceKey="price"
            @change="changeGoodsSpec"
            @buttonsHandle="buttonsHandle"
        />

        <!-- 提交导航栏 -->
        <SubmitBar
            :goods="goods"
            :goodsType="String(goodsPayload.type || GoodsTypeEnum.ORDINARY)"
            :buttons="Array.isArray(goods.buttonsGroup) ? goods.buttonsGroup : (goods.buttonsGroup ? Object.values(goods.buttonsGroup) : [])"
            @refresh="getDetail"
            @buttonsHandle="buttonsHandle"
        ></SubmitBar>

        <!-- 分享 -->
        <SharePopup
            v-model="showShare"
            :share-id="goods.id"
            pagePath="pages/goods_detail/goods_detail"
            :payload="goodsPayload"
            :options="{
                name: goods.name || '',
                image: goods.goodsImage && goods.goodsImage[0] ? goods.goodsImage[0] : '',
                price: goods.sellPrice || 0,
                linePrice: goods.linePrice || 0
            }"
        />

        <!-- 页面状态 -->
        <PageStatus ref="pageRef"></PageStatus>

        <!-- 返回顶部按钮 -->
        <u-back-top
            :scroll-top="goods.scrollTop"
            :top="1000"
            :customStyle="{
                backgroundColor: '#FFF',
                color: '#000',
                boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
            }"
        >
        </u-back-top>
		
		<u-popup			
			v-model="showSafe"						
			mode="bottom"
			:duration="50"
			border-radius="14"
			:closeable="false"			
			:safeAreaInsetBottom="true"
		>
			<view class="coupons mb-[30rpx]">
				<view class="coupons-header p-[30rpx] flex justify-between">
					<view></view>
					<u-icon name="close" color="#999" @tap="showSafe = false"/>								            
				</view>
				
				<!-- 安全图 -->
				<image class="bg-safe" src="/static/images/svg/safe.svg"></image>
				
				<view class="coupons-main ml-[25rpx] ">	
					<view class="item-column mb-[40rpx]">
						<text class="sale-title mb-[10rpx]">明码标价</text>
						<text class="font24 text-[#999999]">费用明码标价，无二次隐形收费</text>	
					</view>
					<view class="item-column mb-[40rpx]">
						<text class="sale-title mb-[10rpx]">服务保证</text>
						<text class="font24 text-[#999999]">专业培训、持证上岗</text>	
					</view>	
					<view class="item-column mb-[40rpx]">
						<text class="sale-title mb-[10rpx]">极速退款</text>
						<text class="font24 text-[#999999]">订单未派单（待服务）时，可申请全额极速退款</text>	
					</view>										
					<view class="item-column mb-[40rpx]">
						<text class="sale-title mb-[10rpx]">售后无忧</text>
						<text class="font24 text-[#999999]">订单完成{{afterSalesDay}}日内，可申请售后服务</text>	
					</view>	
				</view>
				
				<view class="btn-view mt-[100rpx]">
					<view @tap="showSafe = false" class="font36 item-row-center btn-bz text-[#fff]" style="background: var(--theme-color);">我知道了</view>
				</view>
			</view>
		</u-popup>	
				
    </view>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref, shallowRef, unref } from 'vue'
import { onLoad, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app'
import { getGoodsDetail, getGoodsLimitLists } from '@/api/goods'
import { getDecorate } from '@/api/shop'
import { seckillDetaill } from '@/api/marketing/seckill'
import { strToParams } from '@/utils/util'
import { GoodsTypeEnum } from '@/enums/goodsEnums'
import { SubmitEventEnum, getChangeSpecButtons, getConfirmSpecButtons } from '@/pages/goods_detail/config'
import { useSubmitEffect } from '@/pages/goods_detail/useSubmitEffect'
import { useUserStore } from '@/stores/user'

import GoodsAbnormalImage from '@/static/images/empty/goods.png'
import GoodsSwiper from '@/components/goods-swiper/goods-swiper.vue'
import ActivityView from '@/pages/goods_detail/component/activity-view.vue'
import CouponCom from '@/pages/goods_detail/component/coupon-popup.vue'
import GoodsSpec from '@/components/goods-spec/goods-spec.vue'
import RegionalDistribution from '@/pages/goods_detail/component/regional-distribution.vue'
import Reviews from '@/pages/goods_detail/component/reviews.vue'
import GoodsRecommend from '@/pages/goods_detail/component/goodsrecom.vue'
import SubmitBar from '@/pages/goods_detail/component/submit-bar.vue'
import SharePopup from '@/components/share-popup/share-popup.vue'
import PageStatus from '@/components/page-status/page-status.vue'
import Earning from '@/pages/goods_detail/component/earning.vue'
import navbar from '@/components/navbar/navbar.vue'
import { useAppStore } from '@/stores/app'

// 延迟初始化 store，避免在 Pinia 未完全初始化时调用
let appStore: ReturnType<typeof useAppStore> | null = null
const webType = ref<any>(null)
const afterSalesDay = ref<any>(null)
const showSafe = ref<boolean>(false)

const pageRef = shallowRef()
const goodsSpecRef = shallowRef()
const showShare = ref<boolean>(false)

// 商品详情相关的参数
const goods = reactive<any>({
    id: -1,
    name: '',
    content: '',
    // 顶部导航栏
    percent: 0,
    // 返回顶部按钮的当前滚动条数值
    scrollTop: 0,
    scrollTo: 0,
    // 轮播图
    goodsImage: [],
    video: '',
    videoCover: '',
    // 已选择的商品sku
    checkedSku: {},
    // 配送区域
    defaultAddress: {
        addressId: 0,
        provinceName: '北京',
        cityName: '北京市',
        districtName: '朝阳区'
    },
    // 配送费
    defaultFreight: 0,
    // 是否收藏
    isCollect: 0,
    // 当前选中的底部按钮
    buttons: [],
    // 底部提交按钮组
    buttonsGroup: {},
    // 商品所属分类
    categoryId: [],
    // 装修数据
    decorate: [],
    // 评论数据
    goodsComment: [],
    // 猜你喜欢列表
    goods_like: [],
    //佣金
    earningsData: {},
    // 价格相关
    sellPrice: 0,
    linePrice: 0,
    totalStock: 0,
    specType: 1,
    specValue: [],
    specValueList: [],
    unit_name: '',
    status: 1
})

const openSafe = () => {
	//console.log("openSafe:"+openSafe.value)
	
	showSafe.value = !showSafe.value
}

// 商品承载
const goodsPayload = ref<any>({
    type: GoodsTypeEnum.ORDINARY,
    activityId: ''
})
// 活动
const activity = reactive<any>({
    goodsId: '',
    startTime: '',
    minSeckillPrice: '',
    goodsSku: [],
    checkedSku: {},
    browseVolume: '',
    salesVolume: ''
})

const getDetail = async () => {
    try {
        if (!goods.id || goods.id <= 0) {
            throw new Error('商品ID无效')
        }
        const data = await getGoodsDetail({ id: goods.id })
        if (!data) {
            throw new Error('商品详情数据为空')
        }
        
        Reflect.ownKeys(data).map((item: any) => {
            if (item !== '__proto__' && item !== 'constructor') {
                goods[item] = data[item]
            }
        })
        // 确保关键字段有默认值
        if (!goods.goodsImage || !Array.isArray(goods.goodsImage)) {
            goods.goodsImage = []
        }
        if (!goods.checkedSku || typeof goods.checkedSku !== 'object') {
            goods.checkedSku = {}
        }
        if (!goods.decorate || !Array.isArray(goods.decorate)) {
            goods.decorate = []
        }
        if (!goods.content) {
            goods.content = ''
        }
        if (!goods.name) {
            goods.name = '商品详情'
        }
        if (goods.percent === undefined || goods.percent === null) {
            goods.percent = 0
        }
        if (!goods.sellPrice) {
            goods.sellPrice = 0
        }
        if (!goods.totalStock) {
            goods.totalStock = 0
        }
        // 确保 specValueList 是数组
        if (goods.specValueList && !Array.isArray(goods.specValueList)) {
            goods.specValueList = Object.values(goods.specValueList)
        } else if (!goods.specValueList) {
            goods.specValueList = []
        }
        // 确保 buttonsGroup 是对象（用于 SubmitBar，但会转换为数组）
        if (goods.buttonsGroup && Array.isArray(goods.buttonsGroup)) {
            // 如果是数组，保持原样
        } else if (!goods.buttonsGroup) {
            goods.buttonsGroup = {}
        }
        
        if (unref(pageRef)) {
            unref(pageRef).close()
        }
    } catch (error: any) {
        // 提取更详细的错误信息
        let errorMessage = '获取商品详情失败'
        
        // 处理 error 为 null 或 undefined 的情况
        if (error === null || error === undefined) {
            errorMessage = '接口返回数据异常，请稍后重试'
        } else if (typeof error === 'string') {
            errorMessage = error || errorMessage
        } else if (typeof error === 'object') {
            // 尝试多种方式获取错误信息
            errorMessage = error.message || 
                          error.msg || 
                          error.errMsg || 
                          error.error || 
                          (error.data && (typeof error.data === 'string' ? error.data : error.data.message)) ||
                          (error.toString && error.toString() !== '[object Object]' ? error.toString() : JSON.stringify(error))
            
            // 如果还是默认消息，说明可能是空对象
            if (errorMessage === '获取商品详情失败' && Object.keys(error).length === 0) {
                errorMessage = '接口返回数据异常，请稍后重试'
            }
        }
        
        // 打印完整的错误对象以便调试
        console.error('获取商品详情接口失败:', {
            error,
            errorMessage,
            goodsId: goods.id,
            errorType: error?.constructor?.name || typeof error,
            errorStack: error?.stack,
            errorString: error?.toString ? error.toString() : String(error)
        })
        
        if (unref(pageRef)) {
            unref(pageRef).show({
                text: errorMessage,
                src: GoodsAbnormalImage
            })
        }
        console.log('获取商品详情接口', errorMessage)
    }
}

const getGoodsDecorate = async () => {
    try {
        const data = await getDecorate({ id: 5 })
        if (!data || !data.pages) {
            return
        }
        goods.decorate = JSON.parse(data.pages)
        // 检查 decorate[4] 是否存在
        if (!goods.decorate || !Array.isArray(goods.decorate) || !goods.decorate[4] || !goods.decorate[4].content) {
            return
        }
        if (!goods.decorate[4].content.enabled) return
        const good_num = goods.decorate[4].content.goods_num || 10
        console.log('获取猜你喜欢列表')

        if (goods.categoryId && Array.isArray(goods.categoryId) && goods.categoryId.length > 0) {
            goods.goods_like = await getGoodsLimitLists({
                type: 'like',
                limit: good_num,
                categoryId: goods.categoryId.toString()
            })
        } else {
            goods.goods_like = []
        }
    } catch (error) {
        console.log('猜你喜欢列表获取失败', error)
        goods.goods_like = []
    }
}

const getActivityFun = async () => {
    try {
        if (!goodsPayload.value.activityId) {
            console.log('活动ID为空')
            return
        }
        let resultData: any = {}
        switch (goodsPayload.value.type * 1) {
            // 秒杀商品
            case GoodsTypeEnum.SECKILL:
                resultData = await seckillDetaill({
                    id: goodsPayload.value.activityId
                })
                break
        }
        if (resultData && typeof resultData === 'object') {
            Reflect.ownKeys(resultData).map((item: any) => {
                if (item !== '__proto__' && item !== 'constructor') {
                    activity[item] = resultData[item]
                }
            })
        }
    } catch (error) {
        console.log('活动请求失败', error)
    }
}

const onGoodsSpecOpen = ($event: any, event: string) => {
    try {
        if (goodsSpecRef.value && typeof goodsSpecRef.value.handleOpen === 'function') {
            goodsSpecRef.value.handleOpen({ ...$event })
        }
        if (goods.buttonsGroup && goods.buttonsGroup[event]) {
            goods.buttons = [goods.buttonsGroup[event]]
        } else if ($event) {
            goods.buttons = [$event]
        } else {
            goods.buttons = []
        }
    } catch (error) {
        console.log('onGoodsSpecOpen error', error)
    }
}

const handleSpecClick = () => {
    try {
        const confirmSpecButtons = getConfirmSpecButtons()
        onGoodsSpecOpen(confirmSpecButtons, SubmitEventEnum.CONFIRM)
    } catch (error) {
        console.log('handleSpecClick error', error)
    }
}

const changeGoodsSpec = (options: any) => {
    console.log(options)
    goods.checkedSku = options.spec
    activity.checkedSku = options.activitySpec
}

// 处理按钮组事件
const buttonsHandle = async (options: any) => {
    try {
        if (!options || !options.event) {
            console.log('buttonsHandle: options 无效', options)
            return
        }
        switch (options.event) {
            case SubmitEventEnum.CONFIRM:
                const confirmSpecButtons = getConfirmSpecButtons()
                onGoodsSpecOpen(confirmSpecButtons, options.event)
                break
            case SubmitEventEnum.CART:
                onGoodsSpecOpen(null, options.event)
                break
            case SubmitEventEnum.BUY:
                onGoodsSpecOpen(null, options.event)
                break
            case SubmitEventEnum.BUY_NOW:
                onGoodsSpecOpen({ priceKey: 'seckillPrice' }, options.event)
                break
            case SubmitEventEnum.CART_HANDLE:
                try {
                    const { cartHandle } = useSubmitEffect()
                    await cartHandle(options)
                    await getDetail()
                } catch (error) {
                    console.log('加入购物车失败', error)
                    uni.$u.toast(error?.message || '操作失败')
                }
                break
            case SubmitEventEnum.BUY_HANDLE:
                try {
                    const { buyHandle } = useSubmitEffect()
                    await buyHandle(options, goods.id)
                } catch (error) {
                    console.log('购买失败', error)
                    uni.$u.toast(error?.message || '操作失败')
                }
                break
            case SubmitEventEnum.BUY_NOW_HANDLE:
                try {
                    const { buyNowHandle } = useSubmitEffect()
                    await buyNowHandle(options, goods.id, activity?.seckillId || 0)
                } catch (error) {
                    console.log('秒杀购买失败', error)
                    uni.$u.toast(error?.message || '操作失败')
                }
                break
            default:
                console.log('未知的按钮事件', options.event)
        }
    } catch (error) {
        console.log('buttonsHandle error', error)
    }
}

onLoad(async (options: any) => {
    try {
        // 在 onLoad 中初始化 store，确保 Pinia 已完全初始化
        try {
            appStore = useAppStore()
            if (appStore) {
                try {
                    // 安全访问 getWebType 和 getSalesDay
                    const webTypeValue = appStore.getWebType
                    const salesDayValue = appStore.getSalesDay
                    if (webTypeValue !== undefined && webTypeValue !== null) {
                        webType.value = webTypeValue
                    }
                    if (salesDayValue !== undefined && salesDayValue !== null) {
                        afterSalesDay.value = salesDayValue
                    }
                } catch (e) {
                    console.log('获取 appStore 配置失败', e)
                }
            }
        } catch (error) {
            console.log('初始化 appStore 失败', error)
        }
        
        await nextTick()
        
        const { scene, id, payload } = options || {}
        
        if (!scene) {
            goods.id = id
            // 处理 payload，可能是对象或字符串
            if (typeof payload === 'string') {
                try {
                    goodsPayload.value = JSON.parse(payload)
                } catch (e) {
                    goodsPayload.value = { type: GoodsTypeEnum.ORDINARY, activityId: '' }
                }
            } else if (payload && typeof payload === 'object') {
                goodsPayload.value = payload.type ? payload : { type: GoodsTypeEnum.ORDINARY, activityId: '' }
            } else {
                goodsPayload.value = { type: GoodsTypeEnum.ORDINARY, activityId: '' }
            }
        } else {
            try {
                const param = strToParams(decodeURIComponent(scene))
                console.log('param', param)
                goods.id = param.id
                // 承载商品拓展类型(t = goodsType, aid = activityId,
                goodsPayload.value.type = param.t || GoodsTypeEnum.ORDINARY
                goodsPayload.value.activityId = param.aid || ''
            } catch (e) {
                console.log('解析 scene 参数失败', e)
                throw new Error('参数解析失败')
            }
        }
        
        if (!goods.id || goods.id <= 0) {
            throw new Error('请传入有效的商品ID')
        }
        
        // 不是普通商品时
        if (goodsPayload.value.type != GoodsTypeEnum.ORDINARY) {
            await getActivityFun()
        }
        
        // 初始化按钮组
        try {
            const changeSpecButtons = getChangeSpecButtons()
            goods.buttonsGroup = (changeSpecButtons as any)[goodsPayload.value.type] || {}
        } catch (e) {
            console.log('初始化按钮组失败', e)
            goods.buttonsGroup = {}
        }
        
        await getDetail()
        await getGoodsDecorate()
    } catch (error: any) {
        console.error('商品详情报错', error)
        if (unref(pageRef)) {
            unref(pageRef).show({
                text: error?.message || error || '加载失败',
                src: GoodsAbnormalImage
            })
        } else {
            uni.showToast({
                title: error?.message || '加载失败',
                icon: 'none'
            })
        }
    }
})

onPageScroll(({ scrollTop }: any) => {
    try {
        const top = uni.upx2px(100)
        if (top > 0) {
            goods.percent = scrollTop / top > 1 ? 1 : scrollTop / top
        } else {
            goods.percent = 0
        }
        goods.scrollTop = scrollTop || 0
    } catch (error) {
        console.log('onPageScroll error', error)
    }
})

onShareAppMessage(() => {
    try {
        const userStore = useUserStore()
        return {
            title: goods.name || '商品详情',
            path: `/pages/goods_detail/goods_detail?id=${goods.id}&payload=${JSON.stringify(
                goodsPayload.value || {}
            )}&share_code=${userStore?.userInfo?.code || ''}`,
            imageUrl: goods.goodsImage && Array.isArray(goods.goodsImage) && goods.goodsImage[0] ? goods.goodsImage[0] : ''
        }
    } catch (error) {
        console.log('onShareAppMessage error', error)
        return {
            title: '商品详情',
            path: `/pages/goods_detail/goods_detail?id=${goods.id || 0}`,
            imageUrl: ''
        }
    }
})
</script>

<style lang="scss">
.goods-detail {
    // 此样式是在海报中的弹窗生效，share-popup
    // 因为小程序的无能，所以只能写在页面中
    ::v-deep .u-mode-center-box {
        background: none !important;
    }

    ::v-deep .u-drawer-top {
        background: none !important;
    }

    // 此样式是在详情富文本生效，mp-html
    ::v-deep ._img {
        display: block;
    }

    padding-bottom: calc(100rpx + 20rpx + env(safe-area-inset-bottom));

    .goods-detail {
        padding: 30rpx 0;
        text-align: center;

        &-content {
            display: inline-flex;
            align-items: center;
            font-weight: bold;
            font-size: 32rpx;
            color: #333;

            &::before {
                content: '';
                display: inline-block;
                width: 98rpx;
                height: 1px;
                margin: 0 20rpx;
                background: #dcdfe6;
            }

            &::after {
                content: '';
                display: inline-block;
                width: 98rpx;
                height: 1px;
                margin: 0 20rpx;
                background: #dcdfe6;
            }
        }
    }
}
</style>
